<template>
    <div>
        <el-row style="margin-top: 20px;">
  			<el-col :span="14" :offset="4">
	  			<header class="form_header">修改密码</header>
	  			<el-form :model="foodForm" :rules="foodrules" ref="foodForm" label-width="110px" class="form food_form">
            <el-form-item label="旧密码" prop="description">
              <el-input v-model="foodForm.oldpassword"></el-input>
            </el-form-item>
            <el-form-item label="新username" prop="name">
						<el-input v-model="foodForm.name"></el-input>
					</el-form-item>
<!--					<el-form-item label="食品活动" prop="activity">-->
<!--						<el-input v-model="foodForm.activity"></el-input>-->
<!--					</el-form-item>-->
					<el-form-item label="新密码" prop="description">
						<el-input v-model="foodForm.password"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="addFood('foodForm')">修改</el-button>
					</el-form-item>
	  			</el-form>

  			</el-col>
  		</el-row>
    </div>
</template>

<script>


    export default {
    	data(){
    		return {
                uploadFiles: [],
    			restaurant_id: 1,
                pic:"",
    			categoryForm: {
    				categoryList: [],
    				categorySelect: '',
    				name: '',
    				description: '',
    			},
    			foodForm: {
    				name: '',
            password: '',
            oldpassword:""
    			},
    			foodrules: {
    			},
    			attributes: [{
		          	value: '新',
		          	label: '新品'
		        }, {
		          	value: '招牌',
		          	label: '招牌'
		        },],
    			showAddCategory: false,
    			foodSpecs: 'one',
    			dialogFormVisible: false,
		        specsForm: {
		          	specs: '',
		          	packing_fee: 0,
		          	price: 20,
		        }
    		}
    	},

    	methods: {
		    addFood(foodForm){
		    	this.$refs[foodForm].validate(async (valid) => {
					if (valid) {
						try{
              console.log(this.foodForm.name);
              console.log(this.foodForm.password);
              axios.post("http://myphoenixshop.cpolar.io/checkOldPassWord",{
                password:this.foodForm.oldpassword
              },{
                headers:{
                  "tokenValue":this.$store.getters.getUser
                }
              }).then(res=>{
                console.log(res)
                if(res.data.data=="旧密码正确")
                {
                  axios.post("http://myphoenixshop.cpolar.io/update_user_account",{
                    username:this.foodForm.name,
                    password:this.foodForm.password
                  },{
                    headers:{
                      "tokenValue":this.$store.getters.getUser
                    }
                  }).then(res=>{
                    console.log(res)
                  })
                }
                else
                {
                  this.$message({
                    type: 'error',
                    message: "旧密码错误"
                  });
                }
              })
						}catch(err){
							console.log(err)
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				});
		    }
		}
    }
</script>

<style lang="less">
	@import '../style/mixin';
	.form{
		min-width: 400px;
		margin-bottom: 30px;
		&:hover{
			box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
			border-radius: 6px;
			transition: all 400ms;
		}
	}
	.food_form{
		border: 1px solid #eaeefb;
		padding: 10px 10px 0;
	}
	.form_header{
		text-align: center;
		margin-bottom: 10px;
	}
	.category_select{
		border: 1px solid #eaeefb;
		padding: 10px 30px 10px 10px;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
	}
	.add_category_row{
		height: 0;
		overflow: hidden;
		transition: all 400ms;
		background: #f9fafc;
	}
	.showEdit{
		height: 185px;
	}
	.add_category{
		background: #f9fafc;
		padding: 10px 30px 0px 10px;
		border: 1px solid #eaeefb;
		border-top: none;
	}
	.add_category_button{
		text-align: center;
		line-height: 40px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		border: 1px solid #eaeefb;
		border-top: none;
		transition: all 400ms;
		&:hover{
			background: #f9fafc;
			span, .edit_icon{
				color: #20a0ff;
			}
		}
		span{
			.sc(14px, #999);
			transition: all 400ms;
		}
		.edit_icon{
			color: #ccc;
			transition: all 400ms;
		}
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	    border-color: #20a0ff;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 120px;
	    height: 120px;
	    line-height: 120px;
	    text-align: center;
	}
	.avatar {
	    width: 120px;
	    height: 120px;
	    display: block;
	}
	.cell{
		text-align: center;
	}
</style>
